<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <link rel="stylesheet" href="./font_4244860_94hkznoiqd/iconfont.css">
    <link rel="stylesheet" href="./css/swiper.min.css" />
    <link rel="stylesheet" href="./css/commodity.css">
</head>
<body>
    <!-- top -->
    <div class="top">
        <span class="back iconfont icon-zuojiantou"></span>
        <div class="title">商品详情</div>
    </div>

    <!-- 轮播图 -->
    <div class="diy-banner">
        <!-- Swiper -->
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="http://cba.itlike.com/public/uploads/10001/20230321/466724f05d9244533cf747aa9c6968ff.jpg" alt="" />
            </div>
  
            <div class="swiper-slide">
              <img src="http://cba.itlike.com/public/uploads/10001/20230321/466724f05d9244533cf747aa9c6968ff.jpg" alt="" />
            </div>
  
            <div class="swiper-slide">
              <img src="http://cba.itlike.com/public/uploads/10001/20230321/466724f05d9244533cf747aa9c6968ff.jpg" alt="" />
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
        <!-- 图片个数 -->
        <div class="picnum">
          <span class="change">1</span>
          <span class="xian">/</span>
          <span class="length">5</span>
        </div>
    </div>

    <!-- 商品名称和价格 -->
    <div class="goodsname">
      <div class="price">
        <div class="left">
          <span class="min">￥</span>
          <span class="yuan">0.01</span>
          <span class="discount">￥6699.00</span>
        </div>
        <div class="right">
          <span class="tex">已售1201011件</span>
        </div>
      </div>
      <div class="tradename">
        <span class=" text  ellipsis-2">三星手机 SAMSUNG Galaxy S23 8GB+256GB 超视觉夜拍系统 超清夜景 悠雾紫 5G手机 游戏拍照旗舰机s23</span>
      </div>
    </div>

    <!-- 七天无理由退货 -->
    <div class="return">
      <div class="left">
        <div class="seven">
          <i class="iconfont icon-zhengpinbaozhangduigou"></i>
          <span>七天无理由退货</span>
        </div>
        <div class="seven">
          <i class="iconfont icon-zhengpinbaozhangduigou"></i>
          <span>48小时发货</span>
        </div>
      </div>
      <!-- 右侧前近按钮 -->
      <div class="right">
        <span class="iconfont icon-xiangyoujiantou"></span>
      </div>
    </div>

    <!-- 商品评价 -->
    <div class="comments">
      <div class="title">
        <div class="left">商品评价(<span>14</span>条)</div>
        <div class="right">
          <span class="more">查看更多</span>
          <span class="iconfont icon-xiangyoujiantou"></span>
        </div>
      </div>
      <div class="talk">
        
      </div>


      <div class="talk">
        
      </div>
    </div>

    <!-- 商品描述 -->
    <div class="information_details">
      <h3>商品描述</h3>
      <div class="information_pic">
        <!-- <img src="	https://uimgproxy.suning.cn/uimg1/sop/commodity/kHgx21fZMWwqirkMhawkAw.jpg" alt=""> -->
      </div>
    </div>

    <!-- 底部区域 -->
  <footer class="information_footer">
    <div class="footer_index">
      <a href="./index.html">
        <span class="iconfont icon-shouye-zhihui"></span>
        <p>首页</p>
      </a>
    </div>
    <div class="footer_cart">
      <a href="./shopcar.html">
        <span class="iconfont icon-gouwuche"></span>
        <p>购物车</p>
        <div class="count">2</div>
      </a>
    </div>
    <div class="footer_add"><a href="#">加入购物车</a></div>
    <div class="footer_buy"><a href="#">立即购买</a></div>
  </footer>

  <!-- 点击添加购物车弹框 -->
  <div class="layer">
    <div class="wrapper">
      <div class="goodstop">
        <div class="topLeft">
          <img src="http://cba.itlike.com/public/uploads/10001/20230321/c4b5c61e46489bb9b9c0630002fbd69e.jpg" alt="">
        </div>
        <div class="top-right">
          <div class="add-price">￥<i>189.00</i></div>
          <div class="add-inventory">库存:935</div>
        </div>
      </div>
      <div class="add-bottom">
        <div class="bottom-txt">数量</div>
        <div class="bottom-count">
        <button class="reduce active">-</button>
        <span class="num">1</span>
        <button class="add">+</button>
        </div>
      </div>
    </div>
    <div class="shopp-bottom">
      <a href="javascript:;">加入购物车</a>
    </div>
    <!-- 没有库存时显示 -->
    <div class="no-bottom">
      <a href="javascript:;">该商品以抢完</a>
    </div>
    <span class="iconfont icon-bangzhu1"></span>
  </div> 
  <div class="tips">加入购物车成功</div>

  <!-- 遮罩 -->
  <div class="information_mask"></div>

  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>
  <!-- 返回按钮跳转 -->
  <script>
    document.querySelector('.back').addEventListener('click', () => location.href = './index.html')
  </script>

  <!-- <script src="./js/commen.js"></script> -->
  <script src="./js/commodity.js"></script>

  
    
  









    <script src="./js/swiper.min.js"></script>
        <!-- Initialize Swiper -->
        <script>
            var swiper = new Swiper('.swiper-container', {
              pagination: '.swiper-pagination', // nextButton: '.swiper-button-next', // prevButton: '.swiper-button-prev',
              paginationClickable: true,
              spaceBetween: 0,
              centeredSlides: true,
              autoplay: 2500,
              // loop:true,
              autoplayDisableOnInteraction: false
            })
          </script>
</body>
</html>